React createPortal: การสร้าง Portal และการจัดการ Event อย่างมืออาชีพ

ในการพัฒนาเว็บสมัยใหม่ด้วย React การสร้างอินเทอร์เฟซผู้ใช้ที่ผสานเข้ากับโครงสร้างเอกสารพื้นฐานได้อย่างราบรื่นเป็นสิ่งสำคัญอย่างยิ่ง ในขณะที่โมเดลคอมโพเนนต์ของ React นั้นยอดเยี่ยมในการจัดการ Virtual DOM แต่บางครั้งเราจำเป็นต้องแสดงผลองค์ประกอบนอกลำดับชั้นของคอมโพเนนต์ปกติ นี่คือจุดที่ createPortal เข้ามามีบทบาท คู่มือนี้จะสำรวจ createPortal อย่างลึกซึ้ง ครอบคลุมถึงวัตถุประสงค์ การใช้งาน และเทคนิคขั้นสูงสำหรับการจัดการ event และการสร้างองค์ประกอบ UI ที่ซับซ้อน เราจะครอบคลุมข้อควรพิจารณาด้านการทำให้เป็นสากล แนวทางปฏิบัติที่ดีที่สุดด้านการเข้าถึงได้ และข้อผิดพลาดทั่วไปที่ควรหลีกเลี่ยง

React createPortal คืออะไร?

createPortal คือ React API ที่ช่วยให้คุณสามารถแสดงผล children ของ React component ไปยังส่วนอื่นของ DOM tree นอกลำดับชั้นของ parent component ได้ ซึ่งมีประโยชน์อย่างยิ่งสำหรับการสร้างองค์ประกอบต่างๆ เช่น modals, tooltips, dropdowns และ overlays ที่จำเป็นต้องวางตำแหน่งไว้ที่ระดับบนสุดของเอกสารหรือภายใน container ที่เฉพาะเจาะจง โดยไม่คำนึงว่าคอมโพเนนต์ที่เรียกใช้องค์ประกอบเหล่านั้นจะอยู่ที่ใดใน React component tree

หากไม่มี createPortal การทำสิ่งนี้มักจะต้องใช้วิธีแก้ปัญหาที่ซับซ้อน เช่น การจัดการ DOM โดยตรง หรือการใช้ CSS absolute positioning ซึ่งอาจนำไปสู่ปัญหาเกี่ยวกับ stacking contexts, z-index conflicts และการเข้าถึงได้

ทำไมต้องใช้ createPortal?

นี่คือเหตุผลสำคัญที่ทำให้ createPortal เป็นเครื่องมือที่มีค่าในคลังเครื่องมือ React ของคุณ:

• ปรับปรุงโครงสร้าง DOM: หลีกเลี่ยงการซ้อนคอมโพเนนต์ลึกเกินไปใน DOM ทำให้ได้โครงสร้างที่สะอาดและจัดการได้ง่ายขึ้น นี่เป็นสิ่งสำคัญอย่างยิ่งสำหรับแอปพลิเคชันที่ซับซ้อนซึ่งมีองค์ประกอบแบบโต้ตอบจำนวนมาก
• การจัดสไตล์ที่ง่ายขึ้น: จัดตำแหน่งองค์ประกอบเทียบกับ viewport หรือ container ที่เฉพาะเจาะจงได้อย่างง่ายดายโดยไม่ต้องพึ่งพาทริค CSS ที่ซับซ้อน สิ่งนี้ช่วยให้การจัดสไตล์และเลย์เอาต์ง่ายขึ้น โดยเฉพาะอย่างยิ่งเมื่อต้องจัดการกับองค์ประกอบที่ต้องซ้อนทับเนื้อหาอื่น
• เพิ่มความสามารถในการเข้าถึงได้: อำนวยความสะดวกในการสร้าง UI ที่เข้าถึงได้โดยช่วยให้คุณจัดการ focus และการนำทางด้วยคีย์บอร์ดโดยไม่ขึ้นอยู่กับลำดับชั้นของคอมโพเนนต์ เช่น การทำให้แน่ใจว่า focus ยังคงอยู่ภายในหน้าต่าง modal
• การจัดการ Event ที่ดีขึ้น: ช่วยให้ event สามารถแพร่กระจาย (propagate) จากเนื้อหาของ portal ไปยัง React tree ได้อย่างถูกต้อง ทำให้มั่นใจได้ว่า event listeners ที่ผูกไว้กับ parent components ยังคงทำงานตามที่คาดหวัง

การใช้งาน createPortal เบื้องต้น

createPortal API รับอาร์กิวเมนต์สองตัว:

1. React node (JSX) ที่คุณต้องการจะแสดงผล
2. DOM element ที่คุณต้องการจะแสดงผล node นั้น DOM element นี้ควรมีอยู่ก่อนที่คอมโพเนนต์ที่ใช้ createPortal จะ mount

นี่คือตัวอย่างง่ายๆ:

ตัวอย่าง: การแสดงผล Modal

สมมติว่าคุณมี modal component ที่ต้องการแสดงผลที่ท้ายสุดของ body element

            import React from 'react';
import ReactDOM from 'react-dom';

function Modal({ children, isOpen, onClose }) {
  if (!isOpen) return null;

  const modalRoot = document.getElementById('modal-root'); // Assumes you have a <div id="modal-root"></div> in your HTML

  if (!modalRoot) {
    console.error('Modal root element not found!');
    return null;
  }

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    modalRoot
  );
}

export default Modal;

            

              
                Copy
              
            
          

คำอธิบาย:

• เรา import ReactDOM เพราะ createPortal เป็น method ของอ็อบเจกต์ ReactDOM
• เราสมมติว่ามี DOM element ที่มี ID modal-root อยู่ใน HTML ของคุณ นี่คือที่ที่ modal จะถูกแสดงผล ตรวจสอบให้แน่ใจว่า element นี้มีอยู่จริง แนวทางปฏิบัติทั่วไปคือการเพิ่ม <div id="modal-root"></div> ก่อนแท็กปิด </body> ในไฟล์ index.html ของคุณ
• เราใช้ ReactDOM.createPortal เพื่อแสดงผล JSX ของ modal เข้าไปใน modalRoot element
• เราใช้ e.stopPropagation() เพื่อป้องกันไม่ให้ onClick event บนเนื้อหาของ modal ไปเรียกใช้ onClose handler บน overlay ซึ่งจะทำให้การคลิกภายใน modal ไม่ทำให้ modal ปิดลง

การใช้งาน:

            import React, { useState } from 'react';
import Modal from './Modal';

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
        <h2>Modal Content</h2>
        <p>This is the content of the modal.</p>
        <button onClick={() => setIsModalOpen(false)}>Close</button>
      </Modal>
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

ตัวอย่างนี้สาธิตวิธีการแสดงผล modal นอกลำดับชั้นของคอมโพเนนต์ปกติ ทำให้คุณสามารถจัดตำแหน่งแบบ absolute บนหน้าเว็บได้ การใช้ createPortal ด้วยวิธีนี้ช่วยแก้ปัญหาทั่วไปเกี่ยวกับ stacking contexts และช่วยให้คุณสร้างสไตล์ modal ที่สอดคล้องกันทั่วทั้งแอปพลิเคชันได้อย่างง่ายดาย

การจัดการ Event ด้วย createPortal

หนึ่งในประโยชน์หลักของ createPortal คือมันยังคงรักษากลไก event bubbling ตามปกติของ React ไว้ ซึ่งหมายความว่า event ที่เกิดขึ้นภายในเนื้อหาของ portal จะยังคงแพร่กระจายขึ้นไปตาม React component tree ทำให้ parent components สามารถจัดการ event เหล่านั้นได้

อย่างไรก็ตาม สิ่งสำคัญคือต้องเข้าใจว่า event ถูกจัดการอย่างไรเมื่อมันข้ามขอบเขตของ portal

ตัวอย่าง: การจัดการ Event นอก Portal

            import React, { useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

function OutsideClickExample() {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef(null);
  const portalRoot = document.getElementById('portal-root');

  useEffect(() => {
    function handleClickOutside(event) {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
        setIsOpen(false);
      }
    }

    document.addEventListener('mousedown', handleClickOutside);

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [dropdownRef]);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>
      {isOpen && portalRoot && ReactDOM.createPortal(
        <div ref={dropdownRef} style={{ position: 'absolute', top: '50px', left: '0', border: '1px solid black', padding: '10px', backgroundColor: 'white' }}>
          Dropdown Content
        </div>,
        portalRoot
      )}
    </div>
  );
}

export default OutsideClickExample;

            

              
                Copy
              
            
          

คำอธิบาย:

• เราใช้ ref เพื่อเข้าถึง dropdown element ที่แสดงผลอยู่ภายใน portal
• เราผูก mousedown event listener เข้ากับ document เพื่อตรวจจับการคลิกนอก dropdown
• ภายใน event listener เราตรวจสอบว่าการคลิกเกิดขึ้นนอก dropdown หรือไม่ โดยใช้ dropdownRef.current.contains(event.target)
• หากการคลิกเกิดขึ้นนอก dropdown เราจะปิดมันโดยการตั้งค่า isOpen เป็น false

ตัวอย่างนี้สาธิตวิธีการจัดการ event ที่เกิดขึ้นนอกเนื้อหาของ portal ทำให้คุณสามารถสร้างองค์ประกอบแบบโต้ตอบที่ตอบสนองต่อการกระทำของผู้ใช้ในเอกสารโดยรอบได้

กรณีการใช้งานขั้นสูง

createPortal ไม่ได้จำกัดอยู่แค่ modals และ tooltips ง่ายๆ เท่านั้น มันสามารถนำไปใช้ในสถานการณ์ขั้นสูงต่างๆ ได้อีกมากมาย รวมถึง:

• Context Menus: แสดงผล context menus แบบไดนามิกใกล้กับเคอร์เซอร์ของเมาส์เมื่อคลิกขวา
• Notifications: แสดงการแจ้งเตือนที่ด้านบนของหน้าจอ โดยไม่ขึ้นอยู่กับลำดับชั้นของคอมโพเนนต์
• Custom Popovers: สร้าง popover components แบบกำหนดเองพร้อมการจัดตำแหน่งและสไตล์ขั้นสูง
• การผสานรวมกับไลบรารีของบุคคลที่สาม: ใช้ createPortal เพื่อผสานรวม React components กับไลบรารีของบุคคลที่สามที่ต้องการโครงสร้าง DOM ที่เฉพาะเจาะจง

ตัวอย่าง: การสร้าง Context Menu

            import React, { useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

function ContextMenuExample() {
  const [contextMenu, setContextMenu] = useState(null);
  const menuRef = useRef(null);

  useEffect(() => {
    function handleClickOutside(event) {
      if (menuRef.current && !menuRef.current.contains(event.target)) {
        setContextMenu(null);
      }
    }
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [menuRef]);

  const handleContextMenu = (event) => {
    event.preventDefault();
    setContextMenu({
      x: event.clientX,
      y: event.clientY,
    });
  };

  const portalRoot = document.getElementById('portal-root');

  return (
    <div onContextMenu={handleContextMenu} style={{ border: '1px solid black', padding: '20px' }}>
      Right-click here to open context menu
      {contextMenu && portalRoot && ReactDOM.createPortal(
        <div
          ref={menuRef}
          style={{
            position: 'absolute',
            top: contextMenu.y,
            left: contextMenu.x,
            border: '1px solid black',
            padding: '10px',
            backgroundColor: 'white',
          }}
        >
          <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
          </ul>
        </div>,
        portalRoot
      )}
    </div>
  );
}

export default ContextMenuExample;

            

              
                Copy
              
            
          

คำอธิบาย:

• เราใช้ onContextMenu event เพื่อตรวจจับการคลิกขวาบน element เป้าหมาย
• เราป้องกันไม่ให้ context menu เริ่มต้นปรากฏขึ้นโดยใช้ event.preventDefault()
• เราเก็บพิกัดของเมาส์ไว้ใน state variable ที่ชื่อ contextMenu
• เราแสดงผล context menu ภายใน portal โดยจัดตำแหน่งตามพิกัดของเมาส์
• เราใช้ตรรกะการตรวจจับการคลิกภายนอกเช่นเดียวกับตัวอย่างก่อนหน้านี้เพื่อปิด context menu เมื่อผู้ใช้คลิกนอกเมนู

ข้อควรพิจารณาด้านการเข้าถึงได้ (Accessibility)

เมื่อใช้ createPortal สิ่งสำคัญคือต้องพิจารณาถึงการเข้าถึงได้เพื่อให้แน่ใจว่าแอปพลิเคชันของคุณสามารถใช้งานได้โดยทุกคน

การจัดการ Focus

เมื่อ portal เปิดขึ้น (เช่น modal) คุณควรตรวจสอบให้แน่ใจว่า focus ถูกย้ายไปยังองค์ประกอบที่สามารถโต้ตอบได้ตัวแรกภายใน portal โดยอัตโนมัติ ซึ่งจะช่วยให้ผู้ใช้ที่นำทางด้วยคีย์บอร์ดหรือโปรแกรมอ่านหน้าจอสามารถเข้าถึงเนื้อหาของ portal ได้อย่างง่ายดาย

เมื่อ portal ปิดลง คุณควรคืน focus กลับไปยังองค์ประกอบที่เรียกให้ portal เปิดขึ้น เพื่อรักษาลำดับการนำทางที่สอดคล้องกัน

ARIA Attributes

ใช้ ARIA attributes เพื่อให้ข้อมูลเชิงความหมายเกี่ยวกับเนื้อหาของ portal ตัวอย่างเช่น ใช้ aria-modal="true" บน modal element เพื่อระบุว่าเป็นกล่องโต้ตอบแบบ modal ใช้ aria-labelledby เพื่อเชื่อมโยง modal กับชื่อเรื่อง และ aria-describedby เพื่อเชื่อมโยงกับคำอธิบาย

การนำทางด้วยคีย์บอร์ด

ตรวจสอบให้แน่ใจว่าผู้ใช้สามารถนำทางเนื้อหาของ portal โดยใช้คีย์บอร์ดได้ ใช้ tabindex attribute เพื่อควบคุมลำดับของ focus และตรวจสอบให้แน่ใจว่าองค์ประกอบที่สามารถโต้ตอบได้ทั้งหมดสามารถเข้าถึงได้ด้วยคีย์บอร์ด

พิจารณาดักจับ focus ให้อยู่ภายใน portal เพื่อไม่ให้ผู้ใช้เผลอนำทางออกไปข้างนอกโดยไม่ได้ตั้งใจ ซึ่งสามารถทำได้โดยการดักฟัง Tab key และย้าย focus ไปยังองค์ประกอบที่สามารถโต้ตอบได้ตัวแรกหรือตัวสุดท้ายภายใน portal โดยใช้โปรแกรม

ตัวอย่าง: Modal ที่เข้าถึงได้

            import React, { useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

function AccessibleModal({ children, isOpen, onClose, labelledBy, describedBy }) {
  const modalRef = useRef(null);
  const firstFocusableElementRef = useRef(null);
  const [previouslyFocusedElement, setPreviouslyFocusedElement] = useState(null);
  const modalRoot = document.getElementById('modal-root');

  useEffect(() => {
    if (isOpen) {
      // Save the currently focused element before opening the modal.
      setPreviouslyFocusedElement(document.activeElement);

      // Focus the first focusable element in the modal.
      if (firstFocusableElementRef.current) {
        firstFocusableElementRef.current.focus();
      }

      // Trap focus within the modal.
      function handleKeyDown(event) {
        if (event.key === 'Tab') {
          const focusableElements = modalRef.current.querySelectorAll(
            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
          );
          const firstFocusableElement = focusableElements[0];
          const lastFocusableElement = focusableElements[focusableElements.length - 1];

          if (event.shiftKey) {
            // Shift + Tab
            if (document.activeElement === firstFocusableElement) {
              lastFocusableElement.focus();
              event.preventDefault();
            }
          } else {
            // Tab
            if (document.activeElement === lastFocusableElement) {
              firstFocusableElement.focus();
              event.preventDefault();
            }
          }
        }
      }

      document.addEventListener('keydown', handleKeyDown);

      return () => {
        document.removeEventListener('keydown', handleKeyDown);
        // Restore focus to the element that had focus before opening the modal.
        if(previouslyFocusedElement && previouslyFocusedElement.focus) {
          previouslyFocusedElement.focus();
        }
      };
    }
  }, [isOpen, previouslyFocusedElement]);

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div
      className="modal-overlay"
      onClick={onClose}
      aria-modal="true"
      aria-labelledby={labelledBy}
      aria-describedby={describedBy}
      ref={modalRef}
    >
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <h2 id={labelledBy}>Modal Title</h2>
        <p id={describedBy}>This is the modal content.</p>
        <button ref={firstFocusableElementRef} onClick={onClose}>
          Close
        </button>
        {children}
      </div>
    </div>,
    modalRoot
  );
}

export default AccessibleModal;

            

              
                Copy
              
            
          

คำอธิบาย:

• เราใช้ ARIA attributes เช่น aria-modal, aria-labelledby และ aria-describedby เพื่อให้ข้อมูลเชิงความหมายเกี่ยวกับ modal
• เราใช้ useEffect hook เพื่อจัดการ focus เมื่อ modal เปิดและปิด
• เราบันทึกองค์ประกอบที่ถูก focus อยู่ในปัจจุบันก่อนที่จะเปิด modal และคืน focus กลับไปที่องค์ประกอบนั้นเมื่อ modal ปิดลง
• เราดักจับ focus ให้อยู่ภายใน modal โดยใช้ keydown event listener

ข้อควรพิจารณาด้านการทำให้เป็นสากล (i18n)

เมื่อพัฒนาแอปพลิเคชันสำหรับผู้ชมทั่วโลก การทำให้เป็นสากล (i18n) เป็นข้อพิจารณาที่สำคัญ เมื่อใช้ createPortal มีบางประเด็นที่ควรคำนึงถึง:

• ทิศทางของข้อความ (RTL/LTR): ตรวจสอบให้แน่ใจว่าสไตล์ของคุณรองรับทั้งภาษาที่เขียนจากซ้ายไปขวา (LTR) และจากขวาไปซ้าย (RTL) ซึ่งอาจเกี่ยวข้องกับการใช้ logical properties ใน CSS (เช่น margin-inline-start แทน margin-left) และการตั้งค่า dir attribute บน HTML element อย่างเหมาะสม
• การแปลเนื้อหาเป็นภาษาท้องถิ่น: ข้อความทั้งหมดภายใน portal ควรถูกแปลเป็นภาษาที่ผู้ใช้ต้องการ ใช้ไลบรารี i18n (เช่น react-intl, i18next) เพื่อจัดการการแปล
• การจัดรูปแบบตัวเลขและวันที่: จัดรูปแบบตัวเลขและวันที่ตาม locale ของผู้ใช้ Intl API มีฟังก์ชันการทำงานสำหรับสิ่งนี้
• ธรรมเนียมปฏิบัติทางวัฒนธรรม: ระวังธรรมเนียมปฏิบัติทางวัฒนธรรมที่เกี่ยวข้องกับองค์ประกอบ UI ตัวอย่างเช่น ตำแหน่งของปุ่มอาจแตกต่างกันไปในแต่ละวัฒนธรรม

ตัวอย่าง: i18n ด้วย react-intl

            import React from 'react';
import { FormattedMessage } from 'react-intl';

function MyComponent() {
  return (
    <div>
      <FormattedMessage id="myComponent.greeting" defaultMessage="Hello, world!" />
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

คอมโพเนนต์ FormattedMessage จาก react-intl จะดึงข้อความที่แปลแล้วตาม locale ของผู้ใช้ กำหนดค่า react-intl ด้วยคำแปลของคุณสำหรับภาษาต่างๆ

ข้อผิดพลาดที่พบบ่อยและแนวทางแก้ไข

แม้ว่า createPortal จะเป็นเครื่องมือที่มีประสิทธิภาพ แต่สิ่งสำคัญคือต้องระวังข้อผิดพลาดที่พบบ่อยและวิธีหลีกเลี่ยง:

• ไม่มี Portal Root Element: ตรวจสอบให้แน่ใจว่า DOM element ที่คุณใช้เป็น portal root นั้นมีอยู่ก่อนที่คอมโพเนนต์ที่ใช้ createPortal จะ mount แนวทางปฏิบัติที่ดีคือการวางไว้ใน index.html โดยตรง
• Z-Index Conflicts: โปรดระวังค่า z-index เมื่อจัดตำแหน่งองค์ประกอบด้วย createPortal ใช้ CSS เพื่อจัดการ stacking contexts และตรวจสอบให้แน่ใจว่าเนื้อหาของ portal ของคุณแสดงผลอย่างถูกต้อง
• ปัญหาการจัดการ Event: ทำความเข้าใจว่า event แพร่กระจายผ่าน portal อย่างไรและจัดการมันอย่างเหมาะสม ใช้ e.stopPropagation() เพื่อป้องกันไม่ให้ event ไปกระตุ้นการกระทำที่ไม่พึงประสงค์
• Memory Leaks: ทำความสะอาด event listeners และ references อย่างถูกต้องเมื่อคอมโพเนนต์ที่ใช้ createPortal unmount เพื่อหลีกเลี่ยง memory leaks ใช้ useEffect hook พร้อมกับ cleanup function เพื่อทำสิ่งนี้
• ปัญหาการเลื่อนหน้าจอที่ไม่คาดคิด: บางครั้ง Portals อาจรบกวนพฤติกรรมการเลื่อนหน้าจอที่คาดหวังของหน้าเว็บ ตรวจสอบให้แน่ใจว่าสไตล์ของคุณไม่ได้ป้องกันการเลื่อนและองค์ประกอบ modal ไม่ทำให้หน้ากระโดดหรือเกิดพฤติกรรมการเลื่อนที่ไม่คาดคิดเมื่อเปิดและปิด

สรุป

React.createPortal เป็นเครื่องมือที่มีค่าสำหรับการสร้าง UI ที่ยืดหยุ่น เข้าถึงได้ และบำรุงรักษาง่ายใน React ด้วยความเข้าใจในวัตถุประสงค์ การใช้งาน และเทคนิคขั้นสูงสำหรับการจัดการ event และการเข้าถึงได้ คุณสามารถใช้ประโยชน์จากพลังของมันเพื่อสร้างเว็บแอปพลิเคชันที่ซับซ้อนและน่าสนใจซึ่งมอบประสบการณ์ผู้ใช้ที่เหนือกว่าสำหรับผู้ชมทั่วโลก อย่าลืมพิจารณาแนวทางปฏิบัติที่ดีที่สุดด้านการทำให้เป็นสากลและการเข้าถึงได้เพื่อให้แน่ใจว่าแอปพลิเคชันของคุณครอบคลุมและใช้งานได้โดยทุกคน

โดยการปฏิบัติตามแนวทางและตัวอย่างในคู่มือนี้ คุณสามารถใช้ createPortal ได้อย่างมั่นใจเพื่อแก้ปัญหาความท้าทายทั่วไปของ UI และสร้างประสบการณ์เว็บที่น่าทึ่ง